<template>
    <div class="travel-app">
        <!-- 花费计算器页面 -->
        <div class="page">
            <h2>💵 旅行花费计算(3天)</h2>
            <div class="budget-input">
                <label>每日预算（元）：</label>
                <input type="number" v-model.number="dailyBudget" min="0">
            </div>

            <div class="expense-list">
                <div class="expense-item" v-for="(item, index) in expenses" :key="index">
                    <input v-model="item.name" placeholder="项目名称">
                    <input v-model.number="item.amount" type="number" placeholder="金额" min="0">
                    <button @click="removeExpense(index)" class="remove-btn">×</button>
                </div>
                <button @click="addExpense" class="add-btn">+ 添加项目</button>
            </div>

            <div class="summary">
                <p>总花费：{{ totalExpense }} 元</p>
                <p>日均花费：{{ dailyAverage }} 元</p>
                <p :class="budgetStatus">
                    预算状态：{{ budgetMessage }}
                </p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// ------------------- 花费计算 -------------------
const dailyBudget = ref(500);
const expenses = ref([
    { name: '交通', amount: 200 },
    { name: '餐饮', amount: 300 },
    { name: '住宿', amount: 600 }
]);

const totalExpense = computed(() =>
    expenses.value.reduce((sum, item) => sum + (item.amount || 0), 0)
);

const dailyAverage = computed(() => {
    // const days = Math.max(1, expenses.value.length);
    return Math.round(totalExpense.value / 3);
});

const budgetStatus = computed(() => {
    if (dailyAverage.value > dailyBudget.value * 1.2) return 'over';
    if (dailyAverage.value < dailyBudget.value * 0.8) return 'under';
    return 'normal';
});

const budgetMessage = computed(() => {
    const diff = dailyAverage.value - dailyBudget.value;
    if (diff > 0) return `超出预算 ${Math.abs(diff)} 元`;
    if (diff < 0) return `低于预算 ${Math.abs(diff)} 元`;
    return '符合预算';
});

const addExpense = () => {
    expenses.value.push({ name: '', amount: 0 });
};

const removeExpense = (index) => {
    expenses.value.splice(index, 1);
};
</script>

<style>
/* 全局样式 */
.travel-app {
    width: 100%;
    /* 设置宽度为100% */
    margin: 0;
    /* 移除默认外边距 */
    padding: 0;
    /* 移除默认内边距 */
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #333;
}

.page {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    /* 确保内部页面宽度也是100% */
    box-sizing: border-box;
    /* 让内边距和边框不影响宽度 */
}

h2 {
    color: #4a8fe7;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* 花费计算样式 */
.budget-input {
    margin-bottom: 20px;
}

.budget-input input {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100px;
}

.expense-list {
    margin: 20px 0;
}

.expense-item {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.expense-item input {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    flex: 1;
}

.expense-item input:first-child {
    flex: 2;
}

.remove-btn {
    background: #ffebee;
    color: #e74c3c;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
}

.add-btn {
    background: #e8f5e9;
    color: #2ecc71;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

.summary {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
}

.summary p {
    margin: 5px 0;
}

.over {
    color: #e74c3c;
}

.under {
    color: #2ecc71;
}

.normal {
    color: #4a8fe7;
}
</style>
